import { HTableColumns } from "@/components/ant-ext-table/HTable";
import HTag from "@/components/ant-ext/HTag";
import { AdminStat, AdminType, AdminSex } from "@/const/const";
import { Form } from "antd";
import HDataTable from "@/components/ant-ext-table/HDataTable";
import { DeleteOutlined, PlusSquareOutlined } from "@ant-design/icons";
import SysAdmin from "@/api/sys-admin";
import AdminEdit from "@/pages/sysAdmin/edit";
import "./index.less"
import HAction from "@/components/common/HAction";
import { HDataTableSlice } from "@/components/ant-ext-table/redux/dataTableSlice";
import { useDispatch } from "react-redux";
import { Dispatch } from "redux";

function getColumns(dispatch: Dispatch): HTableColumns<any> {
    return [
        {
            title: "id",
            dataIndex: 'id',
            width: '80px',
            fixed: 'left'
        }, {
            title: "用户名",
            dataIndex: 'username', 
        }, {
            title: "真实姓名",
            dataIndex: 'realName',
        }, {
            title: "所属部门",
            dataIndex: 'deptName', 
            width: '120px',
        },
        {
            title: "角色名称",
            dataIndex: 'roleName', 
        },
        {
            title: "性别",
            dataIndex: 'sex',
            render: (value: any) => <HTag tagStype={false} value={value} mapping={AdminSex.tag} />
        },
        {
            title: "手机号",
            dataIndex: 'mobile',
        },
        {
            title: "用户类型",
            dataIndex: 'type',
            render: (value: any) => <HTag tagStype={false} value={value} mapping={AdminType.tag} />
        },
        {
            title: "状态",
            dataIndex: 'status',
            render: (value: any) => <HTag tagStype value={value} mapping={AdminStat.tag} />
        }, {
            title: "创建时间",
            dataIndex: 'createTime', 
        }, {
            title: '操作',
            width: '150px',
            dataIndex: 'action',
            render: (_, record) => (
                <div >
                    <HAction type={"link"}
                        empower={SysAdmin.EDIT}
                        invalid
                        action={() => dispatch!(HDataTableSlice.actions.doAction({
                            action: SysAdmin.EDIT,
                            rowKey: SysAdmin.RowKey,
                            row: record
                        }))}
                        children={'修改'} />
                </div>
            ),
        },
    ]
}

export default function Index() {
    const [form] = Form.useForm()
    const dispatch = useDispatch()

    return <>
        <AdminEdit />
        <div className="parent">
            <div className={"dataTable"}>
                <HDataTable
                    option={[
                        { key: SysAdmin.ADD, title: "新增", icon: <PlusSquareOutlined /> },
                        {
                            key: SysAdmin.DEL,
                            title: "删除",
                            mode: "only",
                            icon: <DeleteOutlined style={{ color: "red" }} />,
                            confirm: "是否要删除所选数据",
                            action: (data) => {
                                SysAdmin.delete({
                                    body: { code: data.selectRowKeys },
                                    success: () => dispatch(HDataTableSlice.actions.setQueryParams({}))
                                })
                            }
                        },
                    ]}
                    queryForm={{
                        form: form,
                        item: [
                            { name: "username", label: "人员名称" },
                            { name: "realName", label: "真实姓名" },
                            { name: "mobile", label: "手机号" },
                            { name: "status", label: "状态", type: "select", dataSource: AdminStat.select, width: "150px" },
                            { name: "type", label: "用户类型", type: "select", dataSource: AdminType.select, width: "150px" },
                        ]
                    }}
                    unSort={true}
                    columns={getColumns(dispatch)} selectMethod={SysAdmin.selectTablePage}
                    rowKey={SysAdmin.RowKey}
                />
            </div>
        </div>
    </>
}